<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model:search="search"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @sort-change="sortChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">

      <template #menu="{ row, size, type }">
        <!--<el-tooltip content="查看图片" placement="top">-->
          <!--<el-button-->
                  <!--icon="el-icon-view"-->
                  <!--link-->
                  <!--:size="size"-->
                  <!--:type="type"-->
                  <!--@click="() => showPic(row)"-->
                  <!--v-if="permission.material_view"-->
          <!--&gt;-->
          <!--</el-button>-->
        <!--</el-tooltip>-->
        <el-tooltip content="查看详情" placement="top">
          <el-button
                  icon="el-icon-view"
                  link
                  :size="size"
                  :type="type"
                  @click="() => showDetail(row)"
                  v-if="permission.material_view"
          >
          </el-button>
        </el-tooltip>
        <el-tooltip content="bom结构数据" placement="top">
          <el-button
                  icon="el-icon-share"
                  link
                  :size="size"
                  :type="type"
                  @click="() => showBomList(row)"
                  v-if="permission.material_view"
          >
          </el-button>
        </el-tooltip>
        <el-tooltip content="bom结构图" placement="top">
          <el-button
                  icon="PriceTag"
                  link
                  :size="size"
                  :type="type"
                  @click="() => showJsMind(row)"
                  v-if="permission.material_view"
          >
          </el-button>
        </el-tooltip>
        <el-tooltip content="列印" placement="top" >
          <el-button
                  icon="DataLine"
                  link
                  :size="size"
                  :type="type"
                  @click="() => showChoice(row)"
                  v-if="permission.material_view"
          >
          </el-button>
        </el-tooltip>
      </template>
    </avue-crud>
    <prod-data ref="prodData" @success="refreshChange"></prod-data>
    <prod-jsmind ref="prodJsmind" @success="refreshChange"></prod-jsmind>
    <prod-pic-data ref="prodPicData" @success="refreshChange"></prod-pic-data>
    <material-form ref="materialForm" @success="refreshChange"></material-form>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove,prodSearchReport} from "@/api/anwise/material/material";
  import {mapGetters} from "vuex";
  import prodData from "@/views/anwise/material/components/prod_data.vue";
  import prodPicData from "@/views/anwise/material/components/prod_pic_data.vue";
  import prodJsmind from "@/views/anwise/material/components/prod_jsmind.vue";
  import MaterialForm from "@/views/anwise/material/material_form.vue";

  export default {
      components: {
          prodData,
          prodPicData,
          MaterialForm,
          prodJsmind
      },
    data() {
      return {
          form: {},
          query: {},
          loading: true,
          dateFormat: 'YYYY-MM-DD',
          pickerOptions: {},
          page: {
              pageSize: 20,
              currentPage: 1,
              total: 0
          },
          search:{},
          selectionList: [],
          option: {
              height:'auto',
              calcHeight: 30,
              tip: false,
              searchShow: false,
              searchMenuSpan: 6,
              border: true,
              index: true,
              selection: true,
              reserveSelection:true,
              labelWidth: 150,
              indexWidth:100,
              menuWidth: 160,
              addBtn: false,
              editBtn: false,
              viewBtn: false,
              delBtn: false,
              stripe: true,
              searchIndex: 3,
              searchIcon: false,
              searchEnter:true,
          column: [
              {
                  label: "编号前缀",
                  prop: "chartId",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入编号前缀",
                      trigger: "blur"
                  }],
              },
              {
                  label: "物料编号",
                  prop: "materialNo",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
                  fixed: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入物料编号",
                      trigger: "blur"
                  }],
              },
              {
                  label: "客户条码",
                  prop: "barCode",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },

              {
                  label: "物料名称",
                  prop: "materialName",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入物料名称",
                      trigger: "blur"
                  }],
              },
              {
                  label: "颜色",
                  prop: "color",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=color",
                  width:120,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  rules: [{
                      required: true,
                      message: "请选择颜色",
                      trigger: "blur"
                  }],
                  search: true,
                  overHidden: true,
                  sortable: true,
                  filterable:true,
              },
              {
                  label: "类别",
                  prop: "type",
                  type: "select",
                  filterable:true,
                  search: true,
                  overHidden: true,
                  sortable: true,
                  dicUrl: "/blade-system/dict-biz/dictionary?code=material_s_type",
                  width:120,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  rules: [{
                      required: true,
                      message: "请选择类别",
                      trigger: "blur"
                  }],
              },
              {
                  label: "烫金纸规格",
                  prop: "mxh",
                  type: "select",
                  filterable:true,
                  overHidden: true,
                  sortable: true,
                  dicUrl: "/blade-system/dict-biz/dictionary?code=tjz_type",
                  width:140,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  rules: [{
                      required: true,
                      message: "请选择烫金纸规格",
                      trigger: "blur"
                  }],
              },
              {
                  label: "产品logo",
                  prop: "mtz",
                  type: "input",
                search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "材质",
                  prop: "mcz",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "是否整箱开单",
                  prop: "abc",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                  filterable: true,
                  overHidden: true,
                  sortable: true,
                  width:150,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择是否整箱开单",
                      trigger: "blur"
                  }],
              },
              {
                  label: "长度",
                  prop: "length",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入长度",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:90,
              },
              {
                  label: "长度单位",
                  prop: "lengthUnit",
                  type: "select",
                  filterable:true,
                  dicUrl: '/api/blade-anwise/unit_info/select?type=length',
                  props: {
                      label: 'name',
                      value: 'name',
                  },
                  dataType: 'string',
                  value:'CM',
                  rules: [{
                      required: false,
                      message: "请选择长度单位",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "宽度",
                  prop: "width",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入宽度",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:90,
              },
              {
                  label: "宽度单位",
                  prop: "widthUnit",
                  type: "select",
                  filterable:true,
                  dicUrl: '/api/blade-anwise/unit_info/select?type=length',
                  props: {
                      label: 'name',
                      value: 'name',
                  },
                  dataType: 'string',
                  value:'CM',
                  rules: [{
                      required: false,
                      message: "请选择宽度单位",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "高度",
                  prop: "height",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入高度",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:90,
              },
              {
                  label: "高度单位",
                  prop: "heightUnit",
                  type: "select",
                  filterable:true,
                  dicUrl: '/api/blade-anwise/unit_info/select?type=length',
                  props: {
                      label: 'name',
                      value: 'name',
                  },
                  value:'CM',
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择高度单位",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "每个/包重",
                  prop: "weight",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每个/包重",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:130,
              },
              {
                  label: "重量单位",
                  prop: "weightUnit",
                  type: "select",
                  filterable:true,
                  dicUrl: '/api/blade-anwise/unit_info/select?type=weight',
                  props: {
                      label: 'name',
                      value: 'name',
                  },
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择重量单位",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "海关编码",
                  prop: "mateGroup",
                  type: "input",
                  rules: [{
                      required: false,
                      message: "请输入海关编码",
                      trigger: "blur"
                  }],
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "每箱净重(KG)",
                  prop: "salesNum",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每箱净重(KG)",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:150,
              },
              {
                  label: "每箱毛重(KG)",
                  prop: "cost",
                  type: "input",
                  value:0,
                  overHidden: true,
                  sortable: true,
                  width:150,
                  rules: [{
                      required: false,
                      message: "请输入每箱毛重(KG)",
                      trigger: "blur"
                  }],
              },
              {
                  label: "安全仓存",
                  prop: "costUnit",
                  type: "input",
                  rules: [{
                      required: false,
                      message: "请输入安全仓存",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "系列代码",
                  prop: "seriesNo",
                  type: "select",
                  filterable:true,
                  dicUrl: '/api/blade-anwise/material_series/select',
                  props: {
                      label: 'seriesNo',
                      value: 'id',
                  },
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择系列代码",
                      trigger: "blur"
                  }],
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              // {
              //     label: "品牌代号",
              //     prop: "programCode",
              //     type:"select",
              //     filterable:true,
              //     dicUrl: '/api/blade-anwise/customer_group/select',
              //     props: {
              //         label: 'programCode',
              //         value: 'programCode',
              //     },
              //     dataType: 'string',
              //     rules: [{
              //         required: false,
              //         message: "请选择品牌代号",
              //         trigger: "blur"
              //     }],
              //     search: true,
              //     overHidden: true,
              //     sortable: true,
              //     width:120,
              // },
              {
                  label: "每外箱数量",
                  prop: "maxNum",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每外箱数量",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:130,

              },
              {
                  label: "每内箱数量",
                  prop: "minNum",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每外箱数量",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:130,

              },
              {
                  label: "每袋数量",
                  prop: "saveNum",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每外箱数量",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "包装尺寸",
                  prop: "packSize",
                  type: "input",
                  value:0,
                  rules: [{
                      required: false,
                      message: "请输入每外箱数量",
                      trigger: "blur"
                  }],
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "是否有效",
                  prop: "isActive",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                  filterable: true,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  value:'是',
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择是否有效",
                      trigger: "blur"
                  }],
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "箱唛颜色",
                  prop: "labelColor",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=label_color",
                  filterable: true,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "图纸编号",
                  prop: "photoNo",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  rules: [{
                      required: false,
                      message: "请输入图纸编号",
                      trigger: "blur"
                  }],
                  width:120,
              },
              {
                  label: "bom是否审批",
                  prop: "isAssign",
                  type: "select",
                  dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                  filterable: true,
                  props: {
                      label: 'dictValue',
                      value: 'dictValue',
                  },
                  dataType: 'string',
                  rules: [{
                      required: false,
                      message: "请选择是否有效",
                      trigger: "blur"
                  }],
                  search: true,
                  searchLabelWidth:110,
                  sortable: true,
                  width:180,
              },
              {
                  label: "bom审批人",
                  prop: "assignName",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:150,
              },
              {
                  label: "bom审批时间",
                  prop: "assignTime",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:150,
              },
              {
                  label: "箱唛说明",
                  prop: "salesUnit",
                  type: "textarea",
                  span:24,
                  minRows:2,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "备注",
                  prop: "remark",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "包装规格",
                  prop: "packRemark",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "箱唛",
                  prop: "packLabel",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                  width:120,
                  overHidden: true,
                  sortable: true,
              },
              {
                  label: "工序备注",
                  prop: "workListRemark",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                  width:120,
                  overHidden: true,
                  sortable: true,
              },

              {
                  label: "创建人",
                  prop: "createUserName",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "创建时间",
                  prop: "createTime",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:160,
              },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.material_add, false),
          viewBtn: this.validData(this.permission.material_view, false),
          delBtn: this.validData(this.permission.material_delete, false),
          editBtn: this.validData(this.permission.material_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      showChoice(row){
        prodSearchReport(row.id, this.isEnglish,this.hiddenBom).then(res => {
          if(res.data.success) {
            const file = res.data.data;
            // const originUrl = (file.url.replace(file.domain, `${this.res}/`));
            const url = file.url;
            // this.$refs.preview.open({
            //     url: url || "",
            //     originUrl: originUrl || ""
            // });
            console.log(url)
            window.open(`/plugins/pdfjs/web/viewer.html?file=`+url);
          }
        })
      },
        showJsMind(row) {
            this.$refs.prodJsmind.$refs.modal_1.show()
            setTimeout(()=>{
                this.$refs.prodJsmind.show("【"+row.materialNo+"】Bom结构图",row.materialNo);
            },100)
          //  this.$refs.prodJsmind.show("【"+row.materialNo+"】Bom结构图",row.materialNo);
        },
        showBomList(row){
            this.$refs.prodData.show("【"+row.materialNo+"】Bom数据展示",row);
        },
        showDetail(row) {
            let title="查看物料基本资料";
            let type='view';
            const id = row.id;
            this.$refs.materialForm.show({
                id,
                title,
                type
            })
        },
        showPic(row) {
            this.$refs.prodPicData.show("【"+row.materialNo+"】图片展示",row.id);
        },
        sortChange(val) {
            console.log(val)
            this.sort = {
                prop: val.prop,
                order: val.order
            };
            let order = "";
            if (this.sort.prop && this.sort.order) {
                if (this.sort.order === "descending") {
                    order = `${this.sort.prop} desc`
                } else {
                    order = `${this.sort.prop} asc`
                }
            }
            this.query.orderBy = order;
            this.onLoad(this.page);
        },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
            console.log("params",params);
            console.log("this.query",this.query);
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>
